<template>
    <div class="rtmp-streamer">
        <video ref="localVideo" autoplay muted></video>
        <video ref="remoteVideo" autoplay></video>
        <button @click="startStreaming">开始推流</button>
        <button @click="stopStreaming">停止推流</button>
    </div>
</template>
  
<script>
export default {
    data() {
        return {
            localStream: null,
            remoteStream: null,
            peerConnection: null,
            mediaConstraints: {
                audio: true,
                video: true
            },
            serverConfig: {
                iceServers: [
                    { urls: 'rtmp://127.0.0.1/live/test' }
                ]
            }
        }
    },
    methods: {
        async startStreaming() {
            this.localStream = await navigator.mediaDevices.getUserMedia(this.mediaConstraints);
            this.$refs.localVideo.srcObject = this.localStream;
            this.peerConnection = new RTCPeerConnection(this.serverConfig);
            this.peerConnection.addStream(this.localStream);
            this.peerConnection.addEventListener('addstream', event => {
                this.remoteStream = event.stream;
                this.$refs.remoteVideo.srcObject = this.remoteStream;
            });
        },
        stopStreaming() {
            this.peerConnection.close();
            this.localStream.getTracks().forEach(track => track.stop());
        }
    }
}
</script>
  
<style scoped>
.rtmp-streamer {
    width: 800px;
    height: 600px;
}
</style>
  